{extend name="layout"}
{block name="title"}ThinkPHP学习{/block}

{block name="content"}
<script>
    var $ = layui.$;
    $('#nav-home').addClass('layui-this')
</script>

<style>
    h1 {
        margin-top: 20px;
    }

    p {
        margin-left: 20px;
    }
</style>

<section>
    <h1>模板的使用分为两种</h1>
    <ul>
        <li>模板布局（layout）
            <p>a. 适合简单的模板布局</p>
            <p>b. 原因：只有内容（{__CONTENT__}）可以替换</p>
        </li>
        <li>模板继承（extend）<b>【建议使用】</b>
            <p>a. 更加强大与灵活</p>
            <p>b.原因：可以替换多个代码块（{block name="xxx"}默认内容{/block}）</p>
        </li>
    </ul>
</section>

<section>
    <h1>模板：变量</h1>
    text变量：{$text}
    <h3>分析</h3>
    <p>括号前后不能有空格</p>
</section>

<section>
    <h1>模板：循环</h1>
    <ul>
        {volist name="list" id="vo" key="i" empty="暂时没有数据"}
        <li>{$i}.{$vo.name}:{$vo.phone}</li>
        {/volist}
    </ul>
    <h3>分析</h3>
    <p>内置循环标签：ovlist（建议使用）、foreach（接近原生PHP）、for（循环数字）</p>
    <p>参数：name-数组、id-数组项、key-下标（从1开始）、empty-为空显示的内容</p>
</section>

<section>
    <h1>标签扩展</h1>
    <!-- 正确写法 -->
    {demo:hello name="这是自定义标签"}

    <!-- 错误写法 -->
    <!-- <demo:hello name="这是自定义标签"/>
    <Demo:hello name="这是自定义标签"/>
    <hello name="John" /> -->

</section>
{/block}